<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/ext-all.css" />
    <style type="text/css">
    #myChart {
      margin:10px;
    }
    </style>
    <title>Kechin - recipt tracking / budget managing</title>
    <script type="text/javascript" src="/js/ext-core-debug.js"></script>
    <script type="text/javascript" src="/js/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '/images/default/s.gif';

    Ext.onReady(function(){

      //prepare datastore
      var myHistory = new Ext.data.JsonStore({
        fields: ['month', 'amount'],
        data: [
          {month:'Oct 10', amount:149.2},
          {month:'Nov 10', amount:300.02},
          {month:'Dec 10', amount:218.29},
          {month:'Jan 11', amount:50.33},
          {month:'Feb 11', amount:210.32},
          {month:'Mar 11', amount:223.44}
        ]
      });

      new Ext.Panel({
        renderTo: 'myChart',
        border: false,
        width: 500,
        height: 300,
        layout: 'fit',
        items: {
          xtype: 'columnchart',
          store: myHistory,
          xField: 'month',
          yField: 'amount',
          extraStyle: {/*
            yAxis: {
              size: 0,
              showLabels: false,
              majorGridLines: { size: 0 },
              minorGridLines: { size: 0 },
              majorTicks: { display: 'none' },
              minorTicks: { display: 'none' }
            },*/
            animationEnabled: false
          },
          seriesStyle: {
          }
        }
      });

      var myMonth = new Ext.data.JsonStore({
        fields: ['category', 'amount'],
        data: [
          {category:'Fun and Gadget', amount:'300.23'},
          {category:'Dining Out', amount:'260.22'},
          {category:'Grocery', amount:'190.32'},
          {category:'Traffic', amount:'103.32'},
          {category:'blabla', amount:'42.94'}
        ]
      });

      new Ext.Panel({
        renderTo: 'myPie',
        border: false,
        width: 500,
        height: 300,
        layout: 'fit',
        items: {
          xtype: 'piechart',
          store: myMonth,
          categoryField: 'category',
          dataField: 'amount',
          extraStyle: {
            legend: {
              display: 'bottom',
              padding: 5
            }
          }
        }
      });

    }); //end onReady
    </script>
  </head>
  <body>
    <h1>The recipt list</h1>
    <table>
    <thead>
      <tr>
        <td>Subject</td>
        <td>Category</td>
        <td>Amount</td>
        <td>Date</td>
      </tr>
    </thead>
    <tbody>
    {% for result in results %}
      <tr>
        <td>{{ result.Subject }}</td>
        <td>{{ result.Category }}</td>
        <td>{{ result.Amount }}</td>
        <td>{{ result.Date }}</td>
      </tr>
    {% endfor %}
    </tbody>
    </table>
    <hr>
    <div id="myChart"></div>
    <div id="myPie"></div>
  </body>
</html>
